<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">

<!-- Begin Jekyll SEO tag v2.3.0 -->
<title>artDialog | 经典的网页对话框组件</title>
<meta property="og:title" content="artDialog">
<meta property="og:locale" content="en_US">
<meta name="description" content="经典的网页对话框组件">
<meta property="og:description" content="经典的网页对话框组件">
<link rel="canonical" href="">
<meta property="og:url" content="http://aui.github.io/artDialog/">
<meta property="og:site_name" content="artDialog">
<script type="application/ld+json">
{"name":"artDialog","description":"经典的网页对话框组件","author":null,"@type":"WebSite","url":"http://aui.github.io/artDialog/","image":null,"publisher":null,"headline":"artDialog","dateModified":null,"datePublished":null,"sameAs":null,"mainEntityOfPage":null,"@context":"http://schema.org"}</script>
<!-- End Jekyll SEO tag -->

    <meta name="description" content="经典的网页对话框组件">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#157878">
    <link href='static/css/css.css' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="static/css/style.css">
  </head>
  <body>
    <section class="page-header">
      <h1 class="project-name">artDialog</h1>
      <h2 class="project-tagline">经典的网页对话框组件</h2>
      
        <a href="javascript:;" class="btn">View on GitHub</a>
      
      
    </section>

    <section class="main-content">
      <h1 id="artdialog">artDialog</h1>

<p><a href="javascript:;"><img src="static/picture/artDialog.svg" alt="CDNJS"></a>
<a href="javascript:;"><img src="static/picture/art-dialog.svg" alt="NPM Version"></a>
<a href="javascript:;"><img src="static/picture/art-dialog1.svg" alt="NPM Downloads"></a></p>

<p>artDialog——经典、优雅的网页对话框控件。</p>

<table>
  <tbody>
    <tr>
      <td><a href="index1.html">文档与示例</a></td>
      <td><a href="javascript:;">AngularJS 版本</a></td>
    </tr>
  </tbody>
</table>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install --save-dev art-dialog
</code></pre></div></div>

<h2 id="成功案例">成功案例</h2>

<p>超过 40 万网站在使用 artDialog，其中不乏国内顶尖的产品：</p>

<ul>
  <li><a href="javascript:;">QQ空间 v8（腾讯）</a></li>
  <li><a href="javascript:;">Phpcms（盛大）</a></li>
  <li><a href="javascript:;">极路由</a></li>
  <li>…</li>
</ul>

<h2 id="更新历史">更新历史</h2>

<p>7.0.0</p>

<ol>
  <li>支持 Webpack</li>
  <li>支持 Npm</li>
  <li>将 CSS 打包到 JS 中</li>
</ol>

<p>6.0.4</p>

<ol>
  <li><code class="highlighter-rouge">content()</code>方法传入隐藏元素并显示，并且<code class="highlighter-rouge">remove()</code>的时候会将元素插入到<code class="highlighter-rouge">body</code>避免被销毁 <a href="javascript:;">#103</a> <a href="javascript:;">#126</a></li>
  <li>修复<code class="highlighter-rouge">button</code>方法可能会多次绑定事件的问题</li>
  <li>模态对话框可以避免 shift + tab 将焦点移出对话框 <a href="javascript:;">#67</a></li>
</ol>

<p>6.0.3</p>

<ol>
  <li>修复<code class="highlighter-rouge">button</code>方法直接传入 html 不显示的问题</li>
  <li>修复版本管理导致<a href="javascript:;">#78</a>重现问题</li>
</ol>

<p>6.0.2</p>

<ol>
  <li>提供无依赖 seajs 与 requirejs 的版本</li>
  <li>取消按钮增加<code class="highlighter-rouge">cancelDisplay</code>配置，保留<code class="highlighter-rouge">cancel</code>事件的同时也不会显示取消按钮</li>
</ol>

<p>6.0.1</p>

<ol>
  <li>进一步完善焦点管理，避免抢夺开发者自己设置的焦点<a href="javascript:;">#67</a></li>
  <li>修复对话框内容使用 html5 data-id 属性冲突的问题<a href="javascript:;">#78</a></li>
  <li>改善 Esc 快捷键与 cancel 的问题<a href="javascript:;">#36</a></li>
</ol>

<p>6.0.0</p>

<ol>
  <li>功能增强：支持定义左下角的区域 HTML、支持 12 个方向的气泡对话框、支持无标题栏与按钮区的对话框</li>
  <li>更好的交互体验：更加先进的焦点管理，支持无障碍访问</li>
  <li>面向未来：基于 HTML5 Dialog 的 API</li>
  <li>模块化：支持 AMD、CMD 规范</li>
  <li>可选增强版：拖拽支持、简化框架页面调用</li>
</ol>

<h2 id="授权协议">授权协议</h2>

<p>免费，且开源，基于<a href="javascript:;">LGPL-3.0</a>协议。</p>

<p><a href="javascript:;">[AD] 前端招聘：在海边写代码</a></p>


      <footer class="site-footer">
        
          <span class="site-footer-owner"><a href="javascript:;">artDialog</a> is maintained by <a href="javascript:;">aui</a>.</span>
        
        <span class="site-footer-credits">This page was generated by <a href="javascript:;">GitHub Pages</a>.</span>
      </footer>
    </section>

    
  </body>
</html>
